import React, { useEffect, useState } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/pages/OnboardAndLeave/AdjustPost/Add/Wrap.less';
import { Card, Col, Form, Row, Spin, Popconfirm, message, Button } from 'antd';
import { connect } from 'umi';
import { readStatusMap, useSetReadStatus } from '@/hooks/useSetReadStatus';
import { BottomAction } from '@/components';
import { history } from 'umi'
import Step from '../components/Step';
import FormList from '../components/JsonToForm';
import style from './index.less';

const Detail = ({ dispatch, flowMyApplication, location, form, loading }) => {
    const listLoading = loading;
    const { processInstanceId, processDefinitionId, employeeCode, applicationNo } = location.query;
    const { detailData, processList } = flowMyApplication;
    const { formList, formValueMap, processInstanceName, processStatus } = detailData;
    const [revokeLoading, setRevokeLoading] = useState(false);
    const [urgeLoading, setUrgeLoading] = useState(false);

    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    const isShow = employeeCode === user?.employeeCode;

    // 获取详情
    const fetchDetail = () => {
        const params = { processInstanceId, applicationNo, processDefinitionId };
        dispatch({
            type: 'flowMyApplication/fetchDetail',
            payload: params
        });
    };
    // 审批流程节点
    const fetchProcessList = () => {
        const params = {
            processInstanceId,
            applicationNo
        };
        dispatch({
            type: 'flowMyApplication/fetchProcess',
            payload: params
        });
    };

    // 撤销申请
    const revokeRecord = () => {
        setRevokeLoading(true);
        dispatch({
            type: 'flowMyApplication/fetchRevokeRecord',
            payload: {
                processInstanceId
            },
            callback: res => {
                setRevokeLoading(false);
                if (res.code === 10000) {
                    message.success(res.msg);
                    history.push({
                        pathname: '/personal/portal/myApplication/list'
                    });
                } else {
                    message.error(res.msg);
                }
            }
        });
    };

    // 催办申请
    const urge = () => {
        setUrgeLoading(true);
        dispatch({
            type: 'flowMyApplication/urge',
            payload: {
                processInstanceId
            },
            callback: res => {
                setUrgeLoading(false);
                if (res.code === 10000) {
                    message.success(res.msg);
                } else {
                    message.error(res.msg);
                }
            }
        });
    };

    useEffect(() => {
        fetchDetail();
        fetchProcessList();
    }, [location.query]);

    useEffect(() => {
        // 页面首次加载先清空models数据
        dispatch({
            type: 'flowMyApplication/save',
            payload: {
                processList: [],
                detailData: {}
            }
        });
    }, []);

    // 页面卸载时清空数据
    useEffect(
        () => () => {
            dispatch({
                type: 'flowMyApplication/save',
                payload: {
                    processList: [],
                    detailData: {}
                }
            });
        },
        []
    );

    useSetReadStatus({ id: processInstanceId, type: readStatusMap.APPLY });

    return (
        <PageHeaderWrapper type="success">
            <Spin spinning={listLoading}>
                <Card>
                    <Row className={styles.titleBox} type="flex">
                        <Col>
                            <h3 className={styles.title}>{processInstanceName}</h3>
                        </Col>
                    </Row>
                    <div className={style.detailCtr}>
                        <FormList
                            form={form}
                            formList={formList}
                            submitBtn="确定"
                            createUser={employeeCode}
                            formValueMap={formValueMap}
                            approve={processList}
                            status={detailData?.status}
                            processInstanceId={processInstanceId}
                        />
                        <div className={styles.wrap}>
                            <h3 className={styles.title}>审批流程</h3>
                            <Row style={{ marginLeft: 30 }}>
                                <Col offset={3}>
                                    <Step data={processList} />
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Card>
                {processStatus === '2' && isShow ? (
                    <BottomAction>
                        <Popconfirm
                            title="确定撤销？"
                            onConfirm={() => {
                                revokeRecord();
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button loading={revokeLoading}>撤销</Button>
                        </Popconfirm>
                        <Popconfirm
                            title="确定催办？"
                            onConfirm={() => {
                                urge();
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="primary" loading={urgeLoading}>
                                催办
                            </Button>
                        </Popconfirm>
                    </BottomAction>
                ) : null}
            </Spin>
        </PageHeaderWrapper>
    );
};
export default connect(({ flowMyApplication, loading }) => ({
    flowMyApplication,
    loading: loading.effects['flowMyApplication/fetchDetail']
}))(Form.create()(Detail));
